<template>
  <div class="wscn-http401-container">
    <div class="wscn-http401">
      <div class="wscn-http401-img">
        <div class="wscn-http401-img-element" />
        <div class="clear" />
      </div>
      <div class="wscn-http401-content">
        <h1 class="wscn-http401-title">401</h1>
        <p class="wscn-http401-desc">抱歉，你没有权限访问该页面</p>
        <router-link to="/">
          <el-button type="primary" class="wscn-http401-btn">返回首页</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wscn-http401-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;

  .wscn-http401 {
    display: flex;
    align-items: center;
    height: 80%;
    min-height: 480px;

    .wscn-http401-img {
      flex: 0 0 52.5%;
      width: 52.5%;
      padding-right: 64px;
      zoom: 1;
      .wscn-http401-img-element {
        background-image: url('~@/assets/error_images/401.png');
        float: right;
        width: 100%;
        max-width: 460px;
        height: 360px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
      }
    }
    .wscn-http401-content {
      -webkit-box-flex: 1;
      -ms-flex: auto;
      flex: auto;
      .wscn-http401-title {
        margin: 0;
        color: #515a6e;
        font-weight: 600;
        font-size: 72px;
        line-height: 72px;
      }

      .wscn-http401-desc {
        margin: 24px 0 16px 0;
        color: #808695;
        font-size: 20px;
        line-height: 28px;
      }

      .wscn-http401-btn {
        margin: 10px 0;
      }
    }
  }
}
</style>

<style lang="scss">
@media screen and (max-width: 768px) {
  .wscn-http401 {
    display: block !important;
    text-align: center;
  }
  .wscn-http401-img {
    margin: 0 auto;
    padding-right: 0 !important;
  }
}
</style>
